<!-- 
  @description: 待办项列表
-->
<template>
  <div class="list-dv">
    <L-Card title="Work" :customStyle="customStyle">
      <div v-for="item of todoList" :key="item.id" class="list-item">
        <TodoItem
          :todoItem="item"
          @confirmUpdate="confirmUpdate"
          @delItem="delItem"
          @finish="finish"
        ></TodoItem>
      </div>
    </L-Card>
  </div>
</template>

<script setup lang="ts">
import { PropType, defineComponent } from 'vue'
import TodoItem from './TodoItem.vue'
import { Todo } from '../../types/TodoType'

// defineComponent(draggable)
const props = defineProps({
  todoList: {
    type: Array as PropType<Todo[]>,
  },
  customStyle: {
    type: Object,
    default: null,
  },
})

const emit = defineEmits(['confirmUpdate', 'delItem', 'finish'])

function finish(item: Object) {
  emit('finish', item)
}

function confirmUpdate(item: Object) {
  emit('confirmUpdate', item)
}

function delItem(item: Object) {
  emit('delItem', item)
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-item {
  width: 100%;
  margin: 15px 0px;
}
</style>
